<template>
  <div>
    <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
      <van-row class="goodslist">
        <van-col class="goods" v-for="(goods,index) in goods_list" :key='goods.goods_id' span="12">
          <div class="goods_thumb"><img v-lazy="goods.goods_image" name="adapter" @click.stop="redirect('/goods/'+goods.goods_id)" /></div>
          <h4 class="goods_name" @click.stop="redirect('/goods/'+goods.goods_id)">{{goods.goods_name}}</h4>
        </van-col>
      </van-row>
    </mescroll-vue>
  </div>
</template>

<script>
  import { mapState,mapActions,mapGetters } from 'vuex';
  import MescrollVue from 'mescroll.js/mescroll.vue'

  export default {
    components:{
      MescrollVue
    },
    name: 'active',
    data() {
      return {
        mescroll: null, // mescroll实例对象
        mescrollDown:{}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
        mescrollUp: { // 上拉加载的配置.
          callback: this.downCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
          htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
          noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
          //避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
          //这就是为什么无更多数据有时候不显示的原因
          toTop: {
            //回到顶部按钮
            src: "./static/images/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图
            offset: 1000 //列表滚动1000px才显示回到顶部按钮
          },
          empty: {
            //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
            //warpId: "mescrollCon", //父布局的id (1.3.5版本支持传入dom元素)
            // icon: "./static/images/mescroll/mescroll-empty.png", //图标,默认null,支持网络图
            //tip: "已经到底了~" //提示
          }
        },
        mescroll: null,
        isLoading:false,
        isFinished:false,
        list:[],
        goods_list:[],
        page_info:{
          current_page:0,
          last_page:0,
          per_page : 10,
          total:0,
        }

      }
    },
    props:{
      cateID:{
        type:Number,
        required:true,
        default(){
          return {
            cateID: 0
          }
        }
      },

    },
    computed: {
    },

    methods: {
      // mescroll组件初始化的回调,可获取到mescroll对象
      mescrollInit (mescroll) {
        this.mescroll = mescroll  // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
      },
      // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
      downCallback (page, mescroll) {
        this.$fetch("/index/getGoodsList/cate_id/"+this.cateID,{page:this.page_info.current_page+1}).then((res)=>{
          if(res.code == 1){
            let arr = res.data.goods_list.data;
            this.page_info.current_page = res.data.goods_list.current_page;
            this.page_info.last_page = res.data.goods_list.last_page;
            this.page_info.per_page = res.data.goods_list.per_page;
            this.page_info.total = res.data.goods_list.total;

            this.goods_list = this.goods_list.concat(arr)
            this.$nextTick(() => {
              mescroll.endSuccess(arr.length)
            })
          }

        });
      },
      onLoadMore() {
        console.log(1211)
        // this.isLoading = false;
        // this.$fetch("/index/getGoodsList/cate_id/"+this.cateID,{page:this.page_info.current_page+1}).then((res)=>{
        //   if(res.code == 1){
        //     this.goods_list = res.data.goods_list.data;
        //     this.page_info.current_page = res.data.goods_list.current_page;
        //     this.page_info.last_page = res.data.goods_list.last_page;
        //     this.page_info.per_page = res.data.goods_list.per_page;
        //     this.page_info.total = res.data.goods_list.total;
        //   }
        //   if (this.page_info.last_page == this.page_info.current_page) {
        //     this.isFinished = true;
        //   }
        // });
        // 异步更新数据
        setTimeout(() => {
          for (let i = 0; i < 10; i++) {
            this.list.push(this.list.length + 1);
          }
          // 加载状态结束
          this.isLoading = false;

          // 数据全部加载完成
          if (this.list.length >= 60) {
            this.isFinished = true;
          }
        }, 500);
      },
      onRefresh(){

      },
      redirect(url){
        console.log(url);
        this.$router.push(url);
      },
    },
    watch: {

    },
    beforeRouteEnter (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
      next(vm => {
        // 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteEnter方法
        vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter() // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
      })
    },
    beforeRouteLeave (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
      // 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteLeave方法
      this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave() // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
      next()
    },
    beforeCreate() {

    },
    created() {

    }

  }
</script>

<style lang="less" scoped>
  @import url('../assets/css/home.less');
</style>
<style scoped>
  /*通过fixed固定mescroll的高度*/
  .mescroll {
    position: fixed;
    top: 80px;
    bottom: 50px;
    height: auto;
  }
</style>
